<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>bui.animate</title>
    <!-- <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../assets/css/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <!-- <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script> -->
    <script src="../assets/js/jquery-1.9.1.min.js"></script>
    <script src="../assets/js/index.js"></script>
    <script src="../assets/js/yui-min.js"></script>
    <script src="../assets/js/combo/oop-min.js"></script>
    <script src="../assets/js/combo/array-extras-min.js"></script>
    <script src="../assets/js/combo/autocomplete.js"></script>
    <script src="../assets/js/combo/history-base-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="sidemenu" class="sidebar-menu">菜单</div>
<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><a href="../index.html"><img src="../assets/css/logo.png" title="" width="30px"></a>
                <a href="../index.html">BUI</a>
                
                </h1>
            
            <p class="off-left">其它版本:<select name="" id="" onchange="window.location.href=this.value"><option value="../api/index.html" selected>1.5.0</option><option value="../api-1.4.8/index.html">1.4.8</option></select></p>
            <p class="off-left" style="font-size:12px;margin-right: 15px;">API for BUI 1.5.4 </p>
            
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div id="sidebar" class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <div id="api-tabview" class="tabview">

        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/bui.accordion.html">bui.accordion</a></li>
            
                <li><a href="../classes/bui.actionsheet.html">bui.actionsheet</a></li>
            
                <li><a href="../classes/bui.ajax.html">bui.ajax</a></li>
            
                <li><a href="../classes/bui.alert.html">bui.alert</a></li>
            
                <li><a href="../classes/bui.all.html">bui.all</a></li>
            
                <li><a href="../classes/bui.animate.html">bui.animate</a></li>
            
                <li><a href="../classes/bui.array.html">bui.array</a></li>
            
                <li><a href="../classes/bui.back.html">bui.back</a></li>
            
                <li><a href="../classes/bui.btn.html">bui.btn</a></li>
            
                <li><a href="../classes/bui.config.html">bui.config</a></li>
            
                <li><a href="../classes/bui.confirm.html">bui.confirm</a></li>
            
                <li><a href="../classes/bui.delete.html">bui.delete</a></li>
            
                <li><a href="../classes/bui.dialog.html">bui.dialog</a></li>
            
                <li><a href="../classes/bui.download.html">bui.download</a></li>
            
                <li><a href="../classes/bui.dropdown.html">bui.dropdown</a></li>
            
                <li><a href="../classes/bui.emitter.html">bui.emitter</a></li>
            
                <li><a href="../classes/bui.file.html">bui.file</a></li>
            
                <li><a href="../classes/bui.fileselect.html">bui.fileselect</a></li>
            
                <li><a href="../classes/bui.get.html">bui.get</a></li>
            
                <li><a href="../classes/bui.getPageParams.html">bui.getPageParams</a></li>
            
                <li><a href="../classes/bui.guid.html">bui.guid</a></li>
            
                <li><a href="../classes/bui.hint.html">bui.hint</a></li>
            
                <li><a href="../classes/bui.init.html">bui.init</a></li>
            
                <li><a href="../classes/bui.input.html">bui.input</a></li>
            
                <li><a href="../classes/bui.levelselect.html">bui.levelselect</a></li>
            
                <li><a href="../classes/bui.list.html">bui.list</a></li>
            
                <li><a href="../classes/bui.listview.html">bui.listview</a></li>
            
                <li><a href="../classes/bui.load.html">bui.load</a></li>
            
                <li><a href="../classes/bui.loader.html">bui.loader</a></li>
            
                <li><a href="../classes/bui.loading.html">bui.loading</a></li>
            
                <li><a href="../classes/bui.mask.html">bui.mask</a></li>
            
                <li><a href="../classes/bui.number.html">bui.number</a></li>
            
                <li><a href="../classes/bui.pickerdate.html">bui.pickerdate</a></li>
            
                <li><a href="../classes/bui.platform.html">bui.platform</a></li>
            
                <li><a href="../classes/bui.post.html">bui.post</a></li>
            
                <li><a href="../classes/bui.prompt.html">bui.prompt</a></li>
            
                <li><a href="../classes/bui.pullrefresh.html">bui.pullrefresh</a></li>
            
                <li><a href="../classes/bui.put.html">bui.put</a></li>
            
                <li><a href="../classes/bui.rating.html">bui.rating</a></li>
            
                <li><a href="../classes/bui.ready.html">bui.ready</a></li>
            
                <li><a href="../classes/bui.refresh.html">bui.refresh</a></li>
            
                <li><a href="../classes/bui.router.html">bui.router</a></li>
            
                <li><a href="../classes/bui.run.html">bui.run</a></li>
            
                <li><a href="../classes/bui.scroll.html">bui.scroll</a></li>
            
                <li><a href="../classes/bui.searchbar.html">bui.searchbar</a></li>
            
                <li><a href="../classes/bui.select.html">bui.select</a></li>
            
                <li><a href="../classes/bui.sidebar.html">bui.sidebar</a></li>
            
                <li><a href="../classes/bui.slide.html">bui.slide</a></li>
            
                <li><a href="../classes/bui.stepbar.html">bui.stepbar</a></li>
            
                <li><a href="../classes/bui.storage.html">bui.storage</a></li>
            
                <li><a href="../classes/bui.store.html">bui.store</a></li>
            
                <li><a href="../classes/bui.swipe.html">bui.swipe</a></li>
            
                <li><a href="../classes/bui.tab.html">bui.tab</a></li>
            
                <li><a href="../classes/bui.typeof.html">bui.typeof</a></li>
            
                <li><a href="../classes/bui.unit.html">bui.unit</a></li>
            
                <li><a href="../classes/bui.upload.html">bui.upload</a></li>
            
                <li><a href="../classes/bui.viewport.html">bui.viewport</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/Animate.html">Animate</a></li>
            
                <li><a href="../modules/Core.html">Core</a></li>
            
                <li><a href="../modules/Event.html">Event</a></li>
            
                <li><a href="../modules/Method.html">Method</a></li>
            
                <li><a href="../modules/Native.html">Native</a></li>
            
                <li><a href="../modules/UI.html">UI</a></li>
            
            </ul>
        </div>
    </div>
</div>
 
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>bui.animate Class</h1>
<div class="box meta">
    

    

    
        <div class="foundat">
            Defined in: <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l12"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:12</code></a>
        </div>
    

    
        
            Module: <a href="../modules/Animate.html">Animate</a>
        
    

    
</div>



<div class="box intro">
    <p>常用的动画,有transform动画,链式动画,属性动画
 <h3>预览地址: <a href="../../index.html#pages/ui_method/bui.animate.html" target="_blank">demo</a></h3></p>
<p><h5>动画配置修改</h5>
<a href="../classes/bui.animate.html#method_option" class="crosslink">option</a>: 设置修改参数 <br>
<a href="../classes/bui.animate.html#method_widget" class="crosslink">widget</a>: 获取依赖的控件 <br>
<a href="../classes/bui.animate.html#method_origin" class="crosslink">origin</a>: 修改动画原点 <br>
<a href="../classes/bui.animate.html#method_transition" class="crosslink">transition</a>: 修改动画时间 <br>
<a href="../classes/bui.animate.html#method_open3D" class="crosslink">open3D</a>: 开启3D加速对rotate有效果 <br></p>
<p><h5>综合动画</h5>
<a href="../classes/bui.animate.html#method_transform" class="crosslink">transform</a>: 综合动画,需要熟悉transform属性 <br></p>
<p><h5>位移动画</h5>
<a href="../classes/bui.animate.html#method_left" class="crosslink">left</a>: 左移动画 <br>
<a href="../classes/bui.animate.html#method_right" class="crosslink">right</a>: 右移动画 <br>
<a href="../classes/bui.animate.html#method_up" class="crosslink">up</a>: 上移动画 <br>
<a href="../classes/bui.animate.html#method_down" class="crosslink">down</a>: 下移动画 <br></p>
<p><h5>缩放动画</h5>
<a href="../classes/bui.animate.html#method_scale" class="crosslink">scale</a>: 缩放动画 <br>
<a href="../classes/bui.animate.html#method_scaleX" class="crosslink">scaleX</a>: 水平缩放动画 <br>
<a href="../classes/bui.animate.html#method_scaleY" class="crosslink">scaleY</a>: 垂直缩放动画 <br></p>
<p><h5>旋转动画</h5>
<a href="../classes/bui.animate.html#method_rotate" class="crosslink">rotate</a>: 左移动画 <br>
<a href="../classes/bui.animate.html#method_rotateX" class="crosslink">rotateX</a>: 右移动画 <br>
<a href="../classes/bui.animate.html#method_rotateY" class="crosslink">rotateY</a>: 左移动画 <br></p>
<p><h5>扭曲动画</h5>
<a href="../classes/bui.animate.html#method_skew" class="crosslink">skew</a>: 扭曲动画 <br>
<a href="../classes/bui.animate.html#method_skewX" class="crosslink">skewX</a>: 水平扭曲动画 <br>
<a href="../classes/bui.animate.html#method_skewY" class="crosslink">skewY</a>: 垂直扭曲动画 <br></p>
<p><h5>属性动画</h5>
<a href="../classes/bui.animate.html#method_property" class="crosslink">property</a>: 属性动画 性能差,尽量少用<br></p>

</div>


    <div class="constructor">
        <h2>Constructor</h2>
        <div id="method_bui.animate" class="method item">
    <h3 class="name"><code>bui.animate</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l12"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:12</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        
    </div>

    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>    //初始化page对象
    var uiAnimate = bui.animate(&quot;#page&quot;);

    //链式动画
    uiAnimate.left(100).down(100).start();

    //累计动画,左移动画以后下移各自100px,
    uiAnimate.left(100).start(function({

      this.down(100).start();
    }));

    //综合动画, 只执行一次,下次执行会从头开始
    uiAnimate.transform(&quot;translateX(-100px)&quot;) ==  uiAnimate.left(100).stop();</code></pre>

            </div>
        </div>
    
</div>

    </div>


<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

        
            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
        
        
        
        
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

            
                <div class="index-section methods">
                    <h3>Methods</h3>

                    <ul class="index-list methods">
                        
                            <li class="index-item method">
                                <a href="#method_clear">clear</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_down">down</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_left">left</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_open3D">open3D</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_option">option</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_origin">origin</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_property">property</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_reverse">reverse</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_right">right</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_rotate">rotate</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_rotateX">rotateX</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_rotateY">rotateY</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_scale">scale</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_scaleX">scaleX</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_scaleY">scaleY</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_skew">skew</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_skewX">skewX</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_skewY">skewY</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_start">start</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_stop">stop</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_transform">transform</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_transition">transition</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_up">up</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_widget">widget</a>

                                
                                
                            </li>
                        
                    </ul>
                </div>
            

            

            

            
        </div>

        
            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>

                
                    <div id="method_clear" class="method item">
    <h3 class="name"><code>clear</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l577"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:577</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>清除动画</p>

    </div>

    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.clear().left(200).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_down" class="method item">
    <h3 class="name"><code>down</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l252"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:252</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>下移动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>正数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.down(100).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_left" class="method item">
    <h3 class="name"><code>left</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l154"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:154</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>左移动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>正数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.left(100).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_open3D" class="method item">
    <h3 class="name"><code>open3D</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l794"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:794</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>开启3D透视,景深,对旋转动画有效,同时会开启GPU硬件加速</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateY(45).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_option" class="method item">
    <h3 class="name"><code>option</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[key]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[value]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l865"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:865</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>获取设置参数</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[key]</code>
                        <span class="type">String | object</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>[ 不传则获取所有参数, 类型为string,没有第2个参数则获取某个参数 ]</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[value]</code>
                        <span class="type">String | number | boolean | function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>[ 设置参数的时候要传,设置多个参数不用传,获取参数的时候也不用传 ]</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>       //获取所有参数
        //获取所有参数
       var option = uiAnimate.option();

       //获取某个参数
       var id = uiAnimate.option( &quot;id&quot; );

       //修改一个参数
       uiAnimate.option( &quot;open3D&quot;,false );

       //修改多个参数
       uiAnimate.option( {&quot;open3D&quot;:false} );</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_origin" class="method item">
    <h3 class="name"><code>origin</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l516"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:516</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>在做动画前更改原点,几种写法 left,top || 25%,75% || right 对旋转放大扭曲有效</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.origin(&quot;25%,75%&quot;).rotate(45).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_property" class="method item">
    <h3 class="name"><code>property</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l819"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:819</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>属性动画,无需start 相对transform会比较耗性能, 配合 transition使用</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //清除动画的位置
       uiAnimate.transition(500).property(&quot;width&quot;,&quot;500px&quot;);</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_reverse" class="method item">
    <h3 class="name"><code>reverse</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l705"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:705</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>返回原来位置,只对transform有效, 暂时跟stop效果一样</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //清除动画的位置
       uiAnimate.reverse();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_right" class="method item">
    <h3 class="name"><code>right</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l185"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:185</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>右移动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>正数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.right(100).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_rotate" class="method item">
    <h3 class="name"><code>rotate</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l355"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:355</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>旋转动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.rotate(45).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_rotateX" class="method item">
    <h3 class="name"><code>rotateX</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l380"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:380</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>水平旋转动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateX(45).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_rotateY" class="method item">
    <h3 class="name"><code>rotateY</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l404"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:404</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>垂直伸展动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //需要开启3d动画才会有效
       uiAnimate.open3D().rotateY(45).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_scale" class="method item">
    <h3 class="name"><code>scale</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l285"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:285</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>缩放动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>示例: &quot;2&quot; | &quot;2,2&quot;</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.scale(&quot;2,2&quot;).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_scaleX" class="method item">
    <h3 class="name"><code>scaleX</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l307"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:307</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>水平缩放动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>示例: 2</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.scaleX(2).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_scaleY" class="method item">
    <h3 class="name"><code>scaleY</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l331"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:331</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>垂直缩放动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>示例: 2</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.scaleY(2).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_skew" class="method item">
    <h3 class="name"><code>skew</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l428"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:428</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>扭曲动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.skew(&quot;10,10&quot;).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_skewX" class="method item">
    <h3 class="name"><code>skewX</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l470"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:470</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>横向扭曲</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.skewX(20).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_skewY" class="method item">
    <h3 class="name"><code>skewY</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l492"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:492</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>纵向扭曲</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>度数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.skewY(20).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_start" class="method item">
    <h3 class="name"><code>start</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[callback]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l645"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:645</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>动画链式的触发</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[callback]</code>
                        <span class="type">Function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>动画执行完触发</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.left(200).down(200).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_stop" class="method item">
    <h3 class="name"><code>stop</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[callback]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l601"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:601</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>清除动画并返回原来位置</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[callback]</code>
                        <span class="type">Function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>动画执行完触发</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.stop();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_transform" class="method item">
    <h3 class="name"><code>transform</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>action</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[callback]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l762"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:762</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>transform独立动画,无需start,但要配合transition使用</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">action</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>要执行的动画</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[callback]</code>
                        <span class="type">Function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>动画执行完触发</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.transition(500).transform(&quot;translateX(-200px)&quot;;</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_transition" class="method item">
    <h3 class="name"><code>transition</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>time</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[easing]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l540"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:540</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>动画的执行时间</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">time</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>动画的执行时间 单位:ms</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[easing]</code>
                        <span class="type">String</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>动画的效果 ease-in | ease-out | ease</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //执行动画
       uiAnimate.transition(500).left(200).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_up" class="method item">
    <h3 class="name"><code>up</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>num</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    
        <span class="flag chainable">chainable</span>
    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l217"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:217</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>上移动画</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">num</code>
                        <span class="type">Number</span>
                    

                    

                    <div class="param-description">
                        <p>正数</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>      //初始化page对象
       var uiAnimate = bui.animate(&quot;#page&quot;);

       //链式动画
       uiAnimate.up(100).start();</code></pre>

            </div>
        </div>
    
</div>

                
                    <div id="method_widget" class="method item">
    <h3 class="name"><code>widget</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[name]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/_Users_wilson_personal_htdocs_opensource_bui-rollup_src_scripts_animate_bui.animate.js.html#l850"><code>&#x2F;Users&#x2F;wilson&#x2F;personal&#x2F;htdocs&#x2F;opensource&#x2F;bui-rollup&#x2F;src&#x2F;scripts&#x2F;animate&#x2F;bui.animate.js:850</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>获取依赖的控件</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[name]</code>
                        <span class="type">String</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>[ 依赖控件名 ]</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
        <div class="example">
            <h4>Example:</h4>

            <div class="example-content">
                <pre class="code prettyprint"><code>       //获取依赖控件 
       var uiAnimateWidget = uiAnimate.widget();</code></pre>

            </div>
        </div>
    
</div>

                
            </div>
        

        

        

        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?1e19beda5d47048a31939f0f67d9b1f9";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</body>
</html>
